<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <canvas
      id="canvas"
      width="500"
      height="500"
      style="border: 1px red solid"
    ></canvas>
  </body>
</html>
<script>
  async function main() {
    // 进行基本的像素操作
    const canvas = document.getElementById("canvas");
    const cxt = canvas.getContext("2d");

    // 绘制图片
    const img = document.createElement("img");
    img.src = "./logo.png";
    await new Promise((resolve) => {
      img.onload = () => {
        resolve();
      };
    });

    cxt.drawImage(img, 0, 0, 500, 500);

    const imageData = cxt.getImageData(0, 0, 400, 400);

    console.log(imageData);

    /*
     可以看到基本的数据结构  data colorSpace height width
     data的类型为Uint8ClampedArray
     一张图的数据量达到了千万级别的
    */
    //  灰白处理  取几个值的平台值
    console.time("百万处理时间");
    // for (let i = 0; i < imageData.data.length; i++) {
    //   const it = imageData.data;
    //   const average = (it[i + 0] * 0.3 + it[i + 1] * 0.5 + it[i + 2] * 0.2) / 3;
    //   it[i + 0] = average;
    //   it[i + 1] = average;
    //   it[i + 2] = average;
    // }
    // 添加亮度
    // let lighter = 30;
    // for (let i = 0; i < imageData.data.length; i+=4) {
    //   const it = imageData.data;
    //   it[i + 0] = it[i + 0] + lighter;
    //   it[i + 1] = it[i + 1] + lighter;
    //   it[i + 2] = it[i + 2] + lighter;
    // }

    // 复古效果

    // putImageData之前使用平移与旋转是没有作用的
    // cxt.translate(200, 200);
    // cxt.rotate(Math.PI / 180 * 100);
    // const img1 = cxt.putImageData(imageData, 10, 10);

    // console.log(img1);
    // console.timeEnd("百万处理时间");

    // const imageData2 = cxt.createImageData(imageData); // 仅仅是复制了宽高

    // cxt.putImageData(imageData2, 100, 100);
  }

  main();
</script>
